<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>RunCode</title>
    <link rel="stylesheet" href="https://weui.io/style/weui.css">
    <script src="https://minglie.gitee.io/mingpage/static/public/weui/js/zepto.min.js"></script>
    <script src="https://minglie.gitee.io/mingpage/static/public/weui/js/weui.min1.2.3.js"></script>
    <script src="/ming_mock_vue.js"></script>
    <script src="https://minglie.gitee.io/mingpage/static/public/vue/3.2/vue.global.prod.min.js"></script>
    <style>
        .leftRight{
            display: flex;
            justify-content: center;
            margin: 4vw auto;
        }
        .weui-btn+.weui-btn{
            margin-top: 0;
        }
        .bottonBtn{
            justify-content: center;
            display: flex;
            margin-top: 5vw;
        }
        .disInput{
            pointer-events: none;
        }
    </style>

</head>

<body>
<div  v-cloak id="main" >
    <div class="container">
        <div>
            <a @click="runGeogebraScript" class="weui-btn weui-btn_primary"   href="javascript:">
                <div class="weui-cell__bd ">
                    <p>运行脚本</p>
                </div>
            </a>
            <div style="height: 2vw">
            </div>
        </div>
        <hr/>
        <div>

            <div>
                <a
                    @click="goUp"
                    @mousedown.native="moveStart('up')"
                    @mouseup.native="moveStop('up')"
                    @mouseout.native="moveStop('up')"
                   class="weui-btn weui-btn_primary"   href="javascript:">
                    <div class="weui-cell__bd ">
                        <p>上</p>
                    </div>

                </a>
            </div>

            <div  class="leftRight">
                <div
                        @click="goLeft"
                        @mousedown.native="moveStart('left')"
                        @mouseup.native="moveStop('left')"
                        @mouseout.native="moveStop('left')"
                     class="weui-btn weui-btn_primary"   href="javascript:">
                    <div class="weui-cell__bd ">
                        <p>左</p>
                    </div>
                </div>
                <div @click="goRight"
                     @mousedown.native="moveStart('right')"
                     @mouseup.native="moveStop('right')"
                     @mouseout.native="moveStop('right')"
                     class="weui-btn weui-btn_primary"   href="javascript:">
                    <div class="weui-cell__bd ">
                        <p>右</p>
                    </div>
                </div>
            </div>
            <div>
                <a @click="goDown"
                   @mousedown.native="moveStart('down')"
                   @mouseup.native="moveStop('down')"
                   @mouseout.native="moveStop('down')"
                   class="weui-btn weui-btn_primary"   href="javascript:">
                    <div class="weui-cell__bd ">
                        <p>下</p>
                    </div>
                </a>
            </div>
        </div>
            <hr/>
        <div class="bottonBtn">
            <input v-model="gotoPositionVal">
            <button @click="gotoPosition">前往</button>
        </div>
        <div class="bottonBtn">
            <label>实际位置(a,b.Bx,By)</label>
            <input class="disInput" :value="realPositionVal.a">
            <input class="disInput" :value="realPositionVal.b">
            <input class="disInput" :value="realPositionVal.Bx">
            <input class="disInput" :value="realPositionVal.By">
           <button @click="getRealPosition">获取实际位置</button>
        </div>
        <div class="bottonBtn">
            <label>计算位置(a,b.Bx,By)</label>
            <input class="disInput" :value="calcPositionVal.a">
            <input class="disInput" :value="calcPositionVal.b">
            <input class="disInput" :value="calcPositionVal.Bx">
            <input class="disInput" :value="calcPositionVal.By">
        </div>
    </div>
</div>
</body>


</html>

<script type="module" >

    import mingGutils from "./ming_geogebrasimUtils.js"

    const   CON_INTERVAL_TIME=300;

    const vueConstructorData={
        async mounted() {


        },
        data() {
            return {
                realPositionVal:{a:"",b:"",Bx:"",By:""},
                calcPositionVal:{a:"",b:"",Bx:"",By:""},
                gotoPositionVal:"65,10"
            }
        },
        methods:{
            runGeogebraScript(){
               M.request.get("/runGeogebraScript")
            },
            async getRealPosition(){
                let r= await M.geogebraCall({
                    method:"getCurPosition",
                    params:{}
                });
                this.realPositionVal=r;
            },
           async gotoPosition(){
               let [Bx,By]= this.gotoPositionVal.split(",")
               let [a,b]= mingGutils.p2a(Bx,By);
               if(a==null || b==null){
                   return;
               }
               //console.log(a,b,Bx,By,"AAAAAAAAAAAAAAA")
               this.calcPositionVal={
                   a,b,Bx,By
               }
                let r= await M.geogebraCall({
                    method:"setCurPosition",
                    params:{a,b}
                });
                this.realPositionVal=r;
            },
            goUp(){
              this.gotoPositionVal= this.realPositionVal.Bx+","+(this.realPositionVal.By+1);
              this.gotoPosition();
            },
            moveStart(type){
                let that = this;
                this.timer && this.moveStop();
                this.timer = setInterval(() => {
                    switch (type){
                        case "up":that.goUp();break
                        case "left":that.goLeft();break
                        case "right":that.goRight();break
                        case "down":that.goDown();break
                    }
                    console.log(type);
                }, CON_INTERVAL_TIME);
            },
            moveStop(){
                clearInterval(this.timer);
            },
            goLeft(){
                this.gotoPositionVal= (this.realPositionVal.Bx-1)+","+this.realPositionVal.By;
                this.gotoPosition();
            },
            goRight(){
                this.gotoPositionVal= (this.realPositionVal.Bx+1)+","+this.realPositionVal.By;
                this.gotoPosition();
            },
            async goDown(){
                this.gotoPositionVal= this.realPositionVal.Bx+","+(this.realPositionVal.By-1);
                this.gotoPosition();
            }
        }

    }
    const {createApp}=Vue;
    const vueApp= createApp(vueConstructorData);
    vueApp.mount('#main');
</script>









<style>
    *{
        margin: 0;
        padding: 0;
    }
    [v-cloak]{
        display: none;
    }
    li{
        list-style:none;
    }
    .badge img{
        width: 50px;
        display: block;
    }
    .badge span {
        position: absolute;
        top: -0.4em;
        right: -0.4em;
    }
    .profile_photo {
        position: relative;
        margin-right: 10px;
    }
    .profile_photo img {
        width: 50px;
        display: block;
    }
    button{
        width: 10vw;
        height: 5vw;
    }
</style>






